<template>
  <div class="bg_f4 loginwrapper">
    <LoginNavbar />
    <div class="flexcenter full_w loginbody">
      <!-- <div class="loginleft">
        <img src="@/assets/images/loginside.png" alt="" class="loginside" />
        <div class="leftcontent">
            <div class="c_fff f-24 textcenter mb_80">欢迎使用</div>
            <div class="f-16 c_fff textcenter mb_100">天天幸运站，快速制作抽奖活动页面。免费使用，不限奖品数量，不限使用人数</div>
            <div class="zcbtn flexcenter c_fff" @click="goPage('/login')">前往登录</div>
        </div>
      </div> -->
      <div class="loginleft bg_fff login_r">
        <div class="f-20 c_000 textcenter title">用户注册</div>
        <el-form
          :model="phoneform"
          :rules="phonerules"
          ref="phoneform"
          class="loginform"
        >
          <el-form-item label="" prop="phone">
            <el-input
              v-model="phoneform.phone"
              auto-complete="off"
              placeholder="请输入手机号码"
            >
            <i slot="prefix" class="el-icon-mobile-phone input-icon"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              v-model="phoneform.password"
              type="password"
              auto-complete="off"
              placeholder="请输入密码"
              show-password
            >
              <svg-icon
                slot="prefix"
                icon-class="password"
                class="el-input__icon input-icon"
              />
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="code" class="codeiput">
            <el-input
              v-model="phoneform.code"
              auto-complete="off"
              placeholder="请输入短信验证码"
              @keyup.enter.native="handleRejister"
            >
            <i slot="prefix" class="el-icon-message input-icon"></i>
            </el-input>
            <span class="codebox">
                <span class="c_primary commhover" v-if="code=='获取验证码'" @click="gain"> {{code}}</span>
                <span v-else class="c_primary commhover" >{{code}}</span>
            </span>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button class="mt_45"
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleRejister"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <div class="flexrowbetween">
              <div>
                已有账号？
                <span class="c_primary commhover" @click="goPage('/login')">返回登录</span>
              </div>
              <div class="c_primary"></div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>   

<script>
import { LoginNavbar } from "@/layout/components";
import Cookies from "js-cookie";
import { sendCode } from '@/api/login'
export default {
  data() {
    return {
      phoneform:{
        phone:'',
        password:'',
        code:'',
      },
      phonerules:{
        phone: [
          { required: true, trigger: "blur", message: "请输入您的手机号码" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入密码" },
        ],
        code: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
      },
      loading: false,
      code:'获取验证码'
    };
  },
  components: {
    LoginNavbar,
  },
  mounted() {},
  methods: {

    handleClick() {},

    register() {},

    // links() {},
    // enter1(e) {},
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },

    //获取验证码
    gain() {
      this.codeEvent(this.phoneform.phone);
    },
    //封装验证码的函数
    codeEvent(iphone) {
      console.log(iphone)
      let reg = /^1[0-9]{10}$/;
      if (!reg.test(iphone)) {
        this.$message({
          message: "请输入正确手机号!",
          type: "warning",
          offset: 150,
        });
      } else {
        sendCode({
          phone: iphone,
          type: 'register',
        }).then(() => {
          this.countDown(60);
        });
      }
    },
    //验证码倒计时
    countDown(time) {
      let _this = this;
      time--;
      if (time == 0) {
        _this.code = "获取验证码";
        return;
      }
      setTimeout(function () {
        _this.code = time + "秒";
        _this.countDown(time);
      }, 1000);
    },

    handleRejister(){
      this.$refs.phoneform.validate(valid => {
        if(!valid) return
        this.loading = true;
        this.$store.dispatch("PhoneRegister", this.phoneform).then(() => {
          this.$router.push({ path: "/" }).catch(()=>{});
        }).catch(() => {
          this.loading = false;
        });
      })
    },

    goPage(page){
      this.$router.push({path:page})
    }
  },
};
</script>

<style lang="scss" scoped>
.title{
  height: 50px;
}
.loginwrapper {
  width: 100%;
  height: 100%;
  background:url('~@/assets/images/bg.png') 50% 50% no-repeat;
  background-size: cover;
}
.loginleft {
  width: 460px;
  height: 500px;
  position: relative;
  .leftcontent{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 80px 50px 30px;
  }
  .loginside {
    width: 100%;
    height: 100%;
  }
}
.loginbody {
  width: 100%;
  height: 100vh;
  justify-content: flex-end;
  padding-right: 15%;
}
.login_r {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 50px 50px 30px;
}
.loginform{
    padding-top: 30px;

    ::v-deep .el-input--prefix .el-input__inner{
        padding-left:45px
    }
    ::v-deep .el-input__prefix{
        left: 18px;
    }
}
.el-form-item{
    margin-bottom: 32px;
}
.el-button{
    border-radius: 20px;
}
.codeiput{
    position: relative;
    ::v-deep .el-input__inner{
       padding-right: 100px;
    }
}
.codebox{
    position: absolute;
    right: 10px;
}
.zcbtn{
    height: 37px;
    width: 200px;
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    margin: auto;
}
</style>
